<template>
    <div>
        <span>{{realname}},您好,共有<span style="color:red">{{need}}</span>人需要投，还有<span style="color:red">{{novote}}</span>人没投</span>
    </div>
    <div>
    <el-table :data="datas.slice((pageNum-1)*pageSize,pageNum*pageSize)" style="width: 100%" max-height="500" border>
        <el-table-column fixed label="序号" width="100">
            <template #default="scopes">
                {{ scopes.$index+1 }}
            </template>
        </el-table-column>
        <el-table-column fixed prop="realname" label="姓名" width="100" />
        <el-table-column prop="isupload" label="述职报告" width="300" />
        <el-table-column prop="position" label="职务" width="300" />
        <el-table-column prop="isvote" label="是否投票" width="300" />
        <el-table-column fixed="right" label="操作" width="300">
            <template #default="scope">
                <div>
                    <el-button
                            v-if="scope.row.isupload=='已上传'"
                            link
                            type="primary"
                            size="small"
                            @click.prevent="look(scope.row.uid)"
                    >
                        查看报告
                    </el-button>
                    <el-button
                            :disabled="scope.row.isvote=='已打分'||scope.row.isvote=='已弃权'"
                            link
                            type="warning"
                            size="small"
                            @click.prevent="handleScoreClick(scope.row.uid)"
                            :class="scope.row.isvote == '未打分' ? 'red-bg' : ''"
                    >
                        打分
                    </el-button>
                    <el-button
                            :disabled="scope.row.isvote=='已打分'||scope.row.isvote=='已弃权'"
                            link
                            type="primary"
                            size="small"
                            @click.prevent="handleQuitClick(scope.row.uid)"
                    >
                        弃权
                    </el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <div class="pagination">
        <el-pagination
                background
                layout="sizes,prev,pager,next,jumper,->,total"
                :page-size.sync="pageSize"
                :current-page.sync="pageNum"
                :page-sizes="[5,10,15,20]"
                :total="totals"
                :hide-on-single-page="true"
                @current-change="getList"
                @size-change="getList1"
        />
    </div>
</template>
<script setup>
import { get,post } from '@/utils/request.js'
import {ElMessage} from 'element-plus'
import router from '@/router'
import { ref,onMounted } from 'vue'
import {userStore} from '@/stores/counter.js'
import {Upload} from '@element-plus/icons-vue'
import moment from 'moment'

const store=userStore()
const realname=ref('')
const datas=ref([])
const need=ref('')
const novote=ref('')
const totals=ref('')
const pageNum=ref(1)
const pageSize=ref(5)

realname.value=store.auth.realname

get('/voting/byOne',(message)=>{
console.log(message)
let count=0
totals.value=message.length
datas.value=message
need.value=message.length
for(let i=0;i<message.length;i++){
if(message[i].isvote=='已打分') count++
else if(message[i].isvote=='已弃权') count++
}
novote.value=Number(message.length)-Number(count)
},(message)=>{

})

const getList=(pageNums)=>{
pageNum.value=pageNums
}

const getList1=(pageSizes)=>{
pageSize.value=pageSizes
}

const handleScoreClick=(uid)=>{
router.push({name:'scores',params:{id:uid}})
}

const handleQuitClick=(uid)=>{
get('/voting/quit/'+uid,(message)=>{
 ElMessage.success(message)
 get('/voting/byOne',(message)=>{
let count=0
totals.value=message.length
datas.value=message
need.value=message.length
for(let i=0;i<message.length;i++){
if(message[i].isvote=='已打分') count++
}
novote.value=Number(message.length)-Number(count)
},(message)=>{

})
},(message)=>{
 ElMessage.warning(message)
})
}

const look=(uid)=>{
window.open('http://localhost:8080/user/look?uid='+uid)
}

</script>
<style scoped>
.red-bg {
  background-color: red;
}
</style>